import $time from '@utils/time'
/* -------------------------------------------------------- Declare -- */
const { $fn, $lazy } = window
/* -------------------------------------------------------- Async Component -- */
const SearchTable = $lazy.hook(()=>import('#cpt/temp/SearchTable'))
const timeData = [
	{ label:'一年', value:1 },
	{ label:'两年', value:2 },
	{ label:'三年', value:3 },
	{ label:'减一年', value:-1 },
	// { label:'四年', value:4 },
	// { label:'五年', value:5 },
]
/* -------------------------------------------------------- Page Component -- */
const Component = () => {
	const addConfig = {
		modal: {
			title 		: '用户账号',
			width 		: 1000,
		},
		form: {
			labelWidth 	: 's8',
			param 		: { 
				password:'a123456', type: 1, disabled: 1, year:1,
				perm: {
					value:[11, 12, 3, 6, 14, 17, 13, 15, 16, 18, 19, 8, 9, 25],
					parent: [4, 1, 0]
				}
			},
			data: [
				{ label: '用户名',  			name: 'username', 		r:1, half:1, rules:'username'},
				{ label: '用户名称', 		name: 'name', 			r:1, half:1},
				{ label: '手机号码',			name: 'phone', 			r:1, half:1 },
				{ label: '用户类型', 		name: 'type', 			half:1, type:'select', r:1, api:'dict/user_type'  },
				{ label: '密码',			name: 'password', 		type:'password', r:1, half:1 },
				{ label: '使用时长',			name: 'year', 			r:1, half:1, type:'select', data:timeData },
				// { label: '角色', 		name: 'role', 			type:'select', half:1 },
				// { label: '菜单权限', 		name: 'perm', 			r:1, type:'tree-select', check:1, expand:2, count:3, half:1, api:'menu/dict' },
				{ label: '禁用',			name: 'disabled', 		type:'radio', r:1, data:$fn.boolData, half:1 },
				// { label: '头像',  			name: 'head', 			half:1, type:'upload', api:'upload', mongo:0, br:1},
				{ label: '备注', 			name: 'mark', 			type:'textarea' },
				{ label: '菜单权限', 		name: 'perm', 			r:1, type:'tree', check:1, expand:2, mode:'menu', api:'menu/dict' },
			]
		},
		onEnd	: ({ mod, update }) => {
			$fn.getRow(addConfig, 'username').disabled = mod
			$fn.getRow(addConfig, 'year').hide = mod
			// $fn.getRow(addConfig, 'perm').expand = mod ? 2 : 0
			update()
		},
	}
	
	const config = {
		page : {
			title: '用户管理',
			controls	: [
				{ label:'新增', mode:'add', r:1 },
				// { mode:'del', abs:1 },
				// { label:'启用', mode:'confirm', isKeys:1, abs:0, api:'user/disabled', rc:1, param: { disabled:false } },
				// { label:'禁用', mode:'confirm', isKeys:1, abs:0, api:'user/disabled', rc:1, param: { disabled:true } },
				{ mode:'refresh'}
			]
		},
		search : {
			data:[
				{ label:'用户名称', 	name:'name' },
				{ label:'用户类型', 	name:'type', type:'select', api:'dict/user_type' },
				{ label:'禁用', 	name:'disabled', type:'select', data:$fn.boolData },
			]
		},
		table: {
			api 		: 'user',
			// paging 		: 0,
			addConfig,
			// clearCache 	: 'user/dict',
			// row 		:{
			// 	disabledKeys: ({ disabled }) => disabled
			// },
			cols		: [
				{ title: '用户名称', 		dataIndex: 'name', 				...$fn.table.name},
				{ title: '用户名', 			dataIndex: 'username', 				width:90},
				{ title: '手机号码', 		dataIndex: 'phone', 			...$fn.table.phone },
				{ title: '员工类型', 		dataIndex: 'type', 				width:60, align:'center' },
				{ title: '入驻时间', 		dataIndex: 'create_time', 		...$fn.table.time },
				{ title: '到期时间', 		dataIndex: 'expire_time', 		...$fn.table.time, render: text => {
					if( text ){
						if( $time.getTime( text ) < $time.getTime( ) ){
							return <span style={{color:'red'}}>{text}</span>
						}else{
							return text
						}
					}else{
						return '永久'
					}
				} },
				{ title: '备注', 			dataIndex: 'mark', 				width:150  },
			],
			controls 	: {
				width: 200,
				data: ({ id, disabled }) => [
					{ mode:'mod', config:addConfig, abs:1, rs:0 },
					{ mode:'formModal', label:'续期', abs:1, rs:0, r:1, config:{
						modal: {
							title 		: '续期',
							width 		: '40%',
						},
						form: {
							labelWidth 	: 's8',
							param 		: { id, year:1 },
							api 		: 'user/renewal',
							way 		: 'put',
							data: [
								{ label: '续期',			name: 'year', r:1, type:'select', data:timeData },
							]
						},
					} }, 
					// { mode:'delPop', abs:1, disabled },
					{ label:disabled ? '启用' : '禁用', mode:'confirm', gray:disabled, disabled: id===1000, abs:0, api:'user/disabled', rc:1, param: { id:[id], disabled:!disabled } },
					// { label:'头像', mode:'img', disabled:!head , config:{ src:head } },
				]
			}
		}
	}
	return <SearchTable {...config}/>
}
export default Component